<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	boolean flag=false;
%>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>home</title>
	<link href="${pageContext.request.contextPath}/css/home.css"
	type=text/css rel=stylesheet>
</head>
<% int i=0; %>
<body>
	<div class="head">
		<div class="log1">
        	<img class="log2" src="img/ju.png" alt=""><span class="ju">剧</span>
        	<a href="home">首页</a>
        	<a href="private" class="priva" id="${USER_SESSION.id }">个人中心</a>
    	</div>
    	<form class="form" action="select.action" mothod="post">
	    	<input style="width: 180px;height: 50px;" class="sea" type="search" name="research" id="">
	    	<input class="ok" type="submit" value="搜索">
    	</form>
    	<div class="login">${USER_SESSION.username}</div>
	</div>
	<br>
	<div>

			<c:forEach items="${user_dramas}" var="row">
				<div class="one_two">
					<div class="one"><img class="pic" src="${row.img}" alt=""></div>
					<div class="two">
						<span class="name">【${row.drama_name}】</span><br>
						<span class="time">时间：${row.time}</span><br>
						<span class="place">地点：${row.place}</span><br>	
						<span class="remark">备注：${row.remark }</span><br>
					</div>
					<div class="three">					
						<c:forEach items="${dramas_seat }" var="row2">
							<c:if test="${row2.dramas_id eq row.id }">
							<%
								if(i<10)
									i++;
								else{
									i=0;
									%>
									<br>
									<%
									
								}
								%>
								<c:choose>
								
								    <c:when test="${row2.user_id eq 0}">
								    	<img src="img/yizi1.png" class="yizi" id="${USER_SESSION.id }:${row.id }:${row2.id}:${row2.seat}:">${row2.seat}
								    </c:when>
								   <c:otherwise>
								   		<img src="img/yizi2.png" class="yizi" onclick="tishi()">${row2.seat}
								    </c:otherwise>
					
								</c:choose>
							</c:if>
						</c:forEach>
					</div>	
					<div class="four">
						<button>立即预约</button>
					</div>
				</div>	
			
			</c:forEach>
			
	</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
function tishi(){
	alert("该座位已预约，请重新预约！");
}

$(".yizi").unbind("click").bind("click",function(){
	let list=$(this).attr('id').split(':');
	console.log(list);
	
	var usernum=list[0];
	var dramanum=list[1];
	var seatnum=list[3];
	var dictid=list[2]
	console.log(usernum,dramanum,seatnum,dictid);
	$.ajax({ 
		type:"post",
		url:"<%=basePath%>addDict.action",
		data:{
			"user_id":usernum,
			"dramas_id":dramanum,
			"seat":seatnum,
			"dictid":dictid
		},
		success:function(data){
			if(data =="OK"){
                alert("座位预约成功！"); 
                window.location.reload();
            }else if(data=="FAIL"){
                alert("座位预约失败，请重新预约！");
                window.location.reload();
            }else{
            	alert("当前时段已有有效预约，请取消后重新预约！");
                window.location.reload();
            }
		}
	}) 
	
})
</script>
</body>
</html>